<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="style.css" type="text/css">
    <style type="text/css">
        #wmc {
            width: 90%;
            height: 300px;
        }

        /* avoid pink tiles */
        .olImageLoadError {
            background-color: transparent !important;
        }
    </style>
    <script src="../lib/Firebug/firebug.js"></script>
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">

        // increase reload attempts 
        OpenLayers.IMAGE_RELOAD_ATTEMPTS = 2;
        
        var format = new OpenLayers.Format.WMC({'layerOptions': {buffer: 0}});
        var doc, context, map;
        
        function init() {
            map = new OpenLayers.Map("map");

            var gwc = new OpenLayers.Layer.WMS(
                "Global Imagery",
                "http://maps.opengeo.org/geowebcache/service/wms",
                {layers: "bluemarble"}
            );

            var vmap = new OpenLayers.Layer.WMS(
                "OpenLayers WMS",
                "http://vmap0.tiles.osgeo.org/wms/vmap0",
                {layers: 'basic'},
                {
                    maxExtent: new OpenLayers.Bounds(-130, 14, -60, 55),
                    maxResolution: 0.1,
                    numZoomLevels: 4,
                    minResolution: 0.02
                }
            );

            var roads = new OpenLayers.Layer.WMS(
                "Transportation Network",
                "http://lioapp.lrc.gov.on.ca/cubeserv/cubeserv.pl",
                {layers: "na_road:CCRS", transparent: "TRUE"},
                {
                    isBaseLayer: false,
                    maxExtent: new OpenLayers.Bounds(
                        -166.532, 4.05046, -0.206818, 70.287
                    ),
                    displayInLayerSwitcher: false,
                    opacity: 0.6,
                    minScale: 32000000,
                    numZoomLevels: 4,
                    maxScale: 6200000
                }
            );

            var nexrad = new OpenLayers.Layer.WMS(
                "Radar 3:1",
                "http://columbo.nrlssc.navy.mil/ogcwms/servlet/WMSServlet/AccuWeather_Maps.wms",
                {layers: "3:1", transparent: "TRUE"},
                {
                    isBaseLayer: false,
                    maxExtent: new OpenLayers.Bounds(
                        -131.029495239, 14.5628967285,
                        -61.0295028687, 54.562896728
                    ),
                    opacity: 0.8,
                    singleTile: true,
                    maxResolution: 0.1,
                    numZoomLevels: 4,
                    minResolution: 0.02
                }
            );

            map.addLayers([gwc, vmap, roads, nexrad]);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.setCenter(new OpenLayers.LonLat(-95, 34.5), 4);
        };
        
        function readWMC(merge) {
            var text = document.getElementById("wmc").value;
            
            if(merge) {
                try {
                    map = format.read(text, {map: map});
                } catch(err) {
                    document.getElementById("wmc").value = err;
                }
            } else {
                map.destroy();
                try {
                    var jsonFormat = new OpenLayers.Format.JSON();
                    var mapOptions = jsonFormat.read(OpenLayers.Util.getElement('mapOptions').value);
                    map = format.read(text, {map: mapOptions});
                    map.addControl(new OpenLayers.Control.LayerSwitcher());
                } catch(err) {
                    document.getElementById("wmc").value = err;
                }
            }
        }
        
        function writeWMC(merge) {
            try {
                var text = format.write(map);
                document.getElementById("wmc").value = text;
            } catch(err) {
                document.getElementById("wmc").value = err;
            }
        }
            
    </script>
    </head>
    <body onload="init()">
    <h1 id="title">WMC Example</h1>

    <div id="tags">
        wmc, parser, advanced, cleanup
    </div>
    <p id="shortdesc">
           Shows parsing of Web Map Context documents.
    </p>
    <div id="map" class="smallmap"></div>
        <button onclick="writeWMC();">write</button><br>
        <button onclick="readWMC();">read as new map</button> with the following extra map options : <input type="text" id="mapOptions" value='{"div": "map", "allOverlays": true}'/><br>
        <button onclick="readWMC(true);">read and merge</button><br>
        <button onclick="pasteWMC();">try with another WMC document</button><br>
        <textarea id="wmc">paste WMC doc here</textarea>
    <div id="docs">
        <p>This is an example of parsing WMC documents. <br>
        The format class has a layerOptions property, which can be used
        to control the default options of the layer when it is created
        by the parser.</p>
    </div>
  </body>
</html>




